<!--
无限报警详情页
wireless-content
-->
<template>
    <div class="wireless-content main-con">
        <div class="filter top-filter">
            <el-row :gutter="20">
                <el-col :span="4">
                    <el-select
                    v-model="faultType"
                    class="sp-select"
                    clearable
                    filterable
                    placeholder="请选择故障类型">
                        <el-option
                        v-for="item in faultTypes"
                        :key="item.userId"
                        :label="item.username"
                        :value="item">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="4">
                    <el-select
                    class="sp-select"
                    v-model="trainNum"
                    clearable
                    filterable
                    placeholder="请选择车号">
                        <el-option
                        v-for="item in trains"
                        :key="item.userId"
                        :label="item.username"
                        :value="item">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="4">
                    <el-date-picker
                    value-format="yyyy-MM-dd HH:mm:ss"
                    type="daterange"
                    class="sp-date"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    v-model="time">
                    </el-date-picker>
                </el-col>
                <el-col :span="3">
                    <el-button
                    type="text"
                    class="sp-text-btn"
                    icon="el-icon-search"
                    @click="handleQuery"
                    >搜索</el-button>
                </el-col>
            </el-row>
        </div>
        <div class="list">
            <con-outer>
                <wireless-table
                :listData="listData"
                :loading="listLoading"
                ></wireless-table>
            </con-outer>
        </div>
        <div class="page">
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next"
            :total="totalNum">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import {
    getWarnList,
} from '@/apis';

export default {
    name: 'wireless-content',
    components: {
        'con-outer': () => import(/* webpackChunkName: "con-outer" */'@/components/wrapper/con-outer'),
        'wireless-table': () => import(/* webpackChunkName: "wireless-table" */'@/components/wireless/wireless-table'),
    },
    data() {
        return {
            // 故障类型
            faultType: null,
            faultTypes: [],
            // 机车号
            trainNum: null,
            trains: [],
            // 时间
            time: [],
            // 列表数据
            listData: [],
            // 页码
            currentPage: 1,
            // 每页显示数量
            pageSize: 10,
            // 列表总数量
            totalNum: 0,
            // 列表loading
            listLoading: false,
        };
    },
    methods: {
        // 点击搜索按钮
        handleQuery() {
            this.currentPage = 1;
            this.pageSize = 10;
            this.queryList();
        },

        // 请求表格数据
        /* offset - 页码，选填，默认第一页
        limit - 每页数量，选填，默认20条
        startTime - yyyy-MM-dd HH:mm:ss
        endTime - yyyy-MM-dd HH:mm:ss
        alarmtype - 故障类型
        trainname - 车号 */
        queryList() {
            this.listLoading = true;
            const startTime = this.time[0] ? this.time[0] : null;
            const endTime = this.time[1] ? this.time[1] : null;
            const params = {
                offset: this.currentPage - 1, // 页码，选填，默认第一页
                limit: this.pageSize, // 每页数量，选填，默认20条
                startTime, // yyyy-MM-dd HH:mm:ss
                endTime,
                alarmtype: this.faultType,
                trainname: this.trainNum,
            };
            getWarnList(params).then((res) => {
                const {
                    rows,
                    total,
                } = res.data.data;
                if (res.data.code === 200) {
                    this.listData = rows;
                    this.totalNum = total;
                    this.listLoading = false;
                } else {
                    this.listLoading = false;
                }
            }).catch((err) => {
                this.listLoading = false;
                window.console.log(err);
            });
        },

        // 选择每页显示多少条
        handleSizeChange(val) {
            this.pageSize = val;
            this.queryList();
        },

        // 选择页码改变
        handleCurrentChange(val) {
            this.currentPage = val;
            this.queryList();
        },

        // 请求

    },
    created() {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
        this.time = [this.$dayjs(start).format('YYYY-MM-DD hh:mm:ss'), this.$dayjs(end).format('YYYY-MM-DD hh:mm:ss')];
        this.queryList();
    },
};
</script>
<style lang="scss">
.wireless-content {
    width: 100%;
    height: calc(100% - 90px);
    padding: 15px 25px;
    box-sizing: border-box;
    background: rgba(5,30,85,0.20);
    box-shadow: inset 0px 0px 37px 0px rgba(12,94,189,0.33);

    .filter {
        height: 40px;
        padding-bottom: 20px;
    }

    .page {
        height: 40px;
        margin-top: 10px;
    }

    .list {
        width: 100%;
        height: calc(100% - 110px);
        box-sizing: border-box;
    }
}
</style>
